<template>
  <div class="zfbmy">
    <div class="outmain ba_f formwidth">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>支付宝蚂蚁门店设置</span>
        </div>
      </div>
      <div class="ba_f8 mar_20 pad_20">
        <div class="lh25 mar_t10 msgtext fon_12">温馨提示：添加门店，请先将该网址<span class="subjectcolor2 mar_lr5">{{ url }}</span>填写到支付宝小程序应用网关</div>
      </div>
      <div>
        <el-form ref="form" :model="formData" label-width="180px" class="mar_t20">
          <el-form-item label="门店ID" v-if="formData.shop_id">
            <el-input v-model="formData.shop_id" placeholder="请输入门店ID" disabled></el-input>
          </el-form-item>
          <el-form-item label="门店名称" prop="shop_name" required>
            <el-input v-model="formData.shop_name" placeholder="请输入门店名称"></el-input>
          </el-form-item>
          <el-form-item label="门店编号" prop="store_no" required>
            <el-input v-model="formData.store_no" placeholder="请输入门店编号"></el-input>
          </el-form-item>
          <el-form-item label="经营类目" prop="categoryData" required>
            <el-cascader
                v-model="formData.categoryData"
                :options="optionsCategory"
                :props="customProps"
                @change="handleChange"
            ></el-cascader>
          </el-form-item>
<!--          <el-form-item label="门店所属商家" prop="store" required>-->
<!--            <el-input v-model="formData.store" placeholder="请输门店所属商家"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="门店地址" prop="address" required>
            <el-input v-model="formData.address" placeholder="请输入门店地址"></el-input>
          </el-form-item>
          <el-form-item label="门店区域" prop="cityData" required>
            <el-cascader v-model="formData.cityData" :options="cityDataOption" :props="customProps2" size='medium'
                         @change='cascaderChange'
                         filterable></el-cascader>
          </el-form-item>
          <el-form-item label="联系电话" prop="contact_mobile" required>
            <el-input v-model="formData.contact_mobile" placeholder="请输入联系电话"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
  </div>
</template>
<script>
import {getAliSaveStore, postAliSaveStore} from '@/api/setup.js';
import category from '@/plugins/category';
import area from '@/plugins/area';

export default {
  data() {
    return {
      formData: {
        shop_name: '',
        address: '',
        store_no: '',
        contact_mobile: '',
        categoryData: [],
        cityData: [],
      },
      url:'',
      optionsCategory: [],
      cityDataOption: [],
      customProps: {
        value: 'categoryCode',
        label: 'categoryName',
        children: 'childrenNodes'
      },
      customProps2: {
        value: 'areaCode',
        label: 'areaName',
        children: 'districtList'
      },
    };
  },
  created() {
    this.bus.$emit('loading', true);
    this.areaMet()
    this.init()
  },
  methods: {
    handleChange(value) {
      this.formData.categoryData = value
    },
    cascaderChange(e) {
      this.formData.cityData = e
    },
    areaMet() {
      this.optionsCategory = category
      const processSubjectTree = tree => {
        tree.forEach(branch => {
          if (branch.districtList) {
            if (branch.districtList.length) {
              processSubjectTree(branch.districtList);
            } else {
              branch.districtList = undefined;
            }
          }
        });
      };
      processSubjectTree(area);
      this.cityDataOption = area
    },
    async init() {
      const { data } = await getAliSaveStore();
      this.url = data.url;
      this.form2 = this.formData;
      this.formData = Object.assign(this.form2, data);
      this.bus.$emit('loading', false);
    },
    submitForm() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          const { msg } = await postAliSaveStore(this.formData);
          this.$baseMessage(msg, 'success');
          this.init();
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss">
.el-icon-check:before {
  transform: rotate(0deg);
}
</style>
